<div class="jimu-popup" style="display: none;">
    <div id="pack-modal" class="modal" tabindex="-1" data-backdrop="static" data-keyboard="false" style="display: none;">
        <!--:if (pack == null || pack.id == 0) {-->
        <form id="pack" class="form-horizontal" action="insert.html" method="post">
            <!--:} else {-->
            <form id="pack" class="form-horizontal" action="update.html" method="post">
                <!--:}-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <!--:if (pack == null || pack.id == 0) {-->
                        <h3>新建套餐</h3>
                        <!--:} else {-->
                        <h3>编辑套餐</h3>
                        <!--:}-->
                    </div>

                    <div class="modal-body">
                        <input id="id" name="id" type="hidden" value="${pack.id!}"/>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">名称</label>
                            <div class="col-sm-10">
                                <input id="name" name="name" placeholder="名称" class="form-control" type="text" value="${pack.name!}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="image.id" class="col-sm-2 control-label">映像</label>
                            <div class="col-sm-10">
                                <select id="image.id" name="image.id" class="selectpicker show-tick form-control">
                                    <!--:for (image in imageList!) {-->
                                    <!--:    if (pack != null && pack.image != null && pack.image.id == image.id) {-->
                                    <option selected value="${image.id!}">${image.name!}</option>
                                    <!--:    } else {-->
                                    <option value="${image.id!}">${image.name!}</option>
                                    <!--:    }-->
                                    <!--:}-->
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cpu" class="col-sm-2 control-label">CPU</label>
                            <div class="col-sm-10">
                                <div class="col-sm-10">
                                    <div class="btn-group-justified" data-toggle="buttons" id="cpu-selector">
                                        <label class="btn btn-primary active">
                                            <input id="cpu" name="cpu" data-sub-memory="[512, 1024, 2048, 4096]" data-sub-default="1024" type="radio" value="1"  checked="checked"/>1核
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="cpu" name="cpu" data-sub-memory="[1024, 2048, 4096, 6144, 8192]" data-sub-default="2048" type="radio" value="2"/>2核
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="cpu" name="cpu" data-sub-memory="[2048, 4096, 6144, 8192, 16384]" data-sub-default="4096" type="radio" value="4"/>4核
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="cpu" name="cpu" data-sub-memory="[4096, 6144, 8192, 16384, 24576, 32768]" data-sub-default="8192" type="radio" value="8"/>8核
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="memory" class="col-sm-2 control-label">内存</label>
                                <div class="col-sm-10">
                                    <div class="btn-group-justified" data-toggle="buttons" id="memory-selector">
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="512"/>512M
                                        </label>
                                        <label class="btn btn-primary active">
                                            <input id="memory" name="memory" type="radio" value="1024" checked="checked"/>1G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="2048"/>2G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="4096"/>4G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="6144"/>6G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="8192"/>8G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="16384"/>16G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory" name="memory" type="radio" value="24576"/>24G
                                        </label>
                                        <label class="btn btn-primary">
                                            <input id="memory9" name="memory" type="radio" value="32768"/>32G
                                        </label>
                                    </div>                                       

                                </div>
                            </div>
                            <div class="form-group">
                                <label for="volume" class="col-sm-2 control-label">数据盘</label>
                                <div class="col-sm-8">
                                    <input id="volume" name="volume" class="selectsider form-control" data-slider-min="0" data-slider-max="200" data-slider-step="10" data-slider-value="${pack.volume!20}" value="${pack.volume!20}"/>
                                </div>
                                <div class="col-sm-2">
                                    <span id="volume-val" class="form-control">${pack.volume!20}G</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="bandwidth" class="col-sm-2 control-label">带宽</label>
                                <div class="col-sm-8">
                                    <input id="bandwidth" name="bandwidth" class="selectsider form-control" data-slider-min="0" data-slider-max="16" data-slider-step="1" data-slider-value="${pack.bandwidth!4}" value="${pack.bandwidth!4}"/>
                                </div>
                                <div class="col-sm-2">
                                    <span id="bandwidth-val" class="form-control">${pack.bandwidth!20}M</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="iconUrl" class="col-sm-2 control-label">图片地址</label>
                                <div class="col-sm-10">
                                    <input id="iconUrl" name="iconUrl" placeholder="图片链接的站内地址" class="form-control" type="text" value="${pack.iconUrl!}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="price" class="col-sm-2 control-label">单价（按月计算）</label>
                                <div class="col-sm-10">
                                    <input id="price" name="price" placeholder="单价（按月计算）" class="form-control" type="text" value="${pack.price!}"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="description" class="col-sm-2 control-label">描述</label>
                                <div class="col-sm-10">
                                    <textarea id="description" name="description" class="form-control" rows="3" placeholder="模板描述255个字以内">${pack.description!}</textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="pack-form-submit" type="button" class="btn btn-default" onclick="$('#pack').ajaxLoad();">提交</button>
                            <button type="button" data-dismiss="modal" class="btn btn-primary">关闭</button>
                        </div>   
                    </div>
            </form>

    </div>
</div>
<script>
                                var touchCpu = function(cpu) {
                                    var subvals = $(cpu).children("input").data("sub-memory");
                                    var defval = $(cpu).children("input").data("sub-default");

                                    $("#memory-selector > label").each(function(index, elm) {
                                        var val = $(elm).children("input").attr("value");
                                        if (val == defval) {
                                            // 设置选中状态
                                            $(this).removeClass("disabled").addClass("active");
                                            $(this).children("input").attr("checked", "checked");
                                            $(this).show();
                                        } else {
                                            var b = false;
                                            for (var i = 0; i < subvals.length; i++) {
                                                if (val == subvals[i]) {
                                                    b = true;
                                                    break;
                                                }
                                            }
                                            if (b) {
                                                // 设置可选状态
                                                $(this).removeClass("disabled").removeClass("active");
                                                $(this).show();
                                            } else {
                                                // 设置不可选状态
                                                // $(this).addClass("disabled").removeClass("active");
                                                $(this).hide();
                                            }
                                        }
                                    });
                                }
                                // 设置初始状态
                                touchCpu($("#cpu-selector").children("label")[0]);
                                // 设置点击状态
                                $("#cpu-selector > label").click(function() {
                                    touchCpu($(this));
                                });

                                $("#bandwidth").on("slide", function(slideEvt) {
                                    $("#bandwidth-val").text(slideEvt.value + "M");
                                });

                                $("#volume").on("slide", function(slideEvt) {
                                    $("#volume-val").text(slideEvt.value + "G");
                                });

</script>    
